<template>
  <div>
    <el-tree
      :data="depts"
      :props="{label: 'name'}"
      default-expand-all
    />
  </div>
</template>

<script>
import { getDeptList } from '@/api/departments'
export default {
  data() {
    return {
      depts: []
    }
  },
  async created() {
    const { depts } = await getDeptList()
    console.log(depts)
    this.depts = this.listToTreeData(depts, '')
  },
  methods: {
    listToTreeData(list, pid) {
      // 函数本体作用, 根据传入pid条件查找对应子部门, 第一次以 '' 查找顶级
      const res = []
      list.forEach(element => {
        if (element.pid === pid) {
          // 找到一个,就以这个的 id 作为下一层的条件继续查找子部门
          element.children = this.listToTreeData(list, element.id)
          res.push(element)
        }
      })
      return res
    }
  }
}
</script>

<style>

</style>
